<template>
  <view>
    <view class="page">
      <my-modal ref="modal" title="商品搜索" width="92%" :top="navBarHeight" @afterModalClose="afterModalClose()">
        <view class="modal-container">
          <tui-searchbar ref="searchbar" :cancel="false" radius="30px" @search="getGoods"></tui-searchbar>

          <scroll-view v-if="goodsList && goodsList.length > 0" scroll-y scroll-with-animation class="goods-container">
            <block v-for="rowData in goodsList" :key="rowData.id">
              <view v-if="rowData.id" class="goods-item-box">
                <!-- 商品图片 -->
                <view class="goods-item-img">
                  <image v-if="rowData.img" class="width-100 height-100" :src="rowData.img" mode="aspectFill"></image>
                </view>

                <!-- 商品内容 -->
                <view class="goods-item-content">
                  <!-- 标题 -->
                  <!-- {{ rowData.Lscs }} -->
                  <view class="goods-item-title text-ellipsis"> {{ rowData.name }} </view>

                  <view v-if="rowData.Lscs" class="is-flex fs-xxs mt-2">
                    <!-- <tui-tag type="gold" margin="0 4px 0 0" padding="4px 5px" size="18rpx" plain> 满 {{ getLscs(rowData.Lscs, '满') }} 件起 </tui-tag> -->

                    <tui-tag type="gold" margin="0 4px 0 0" padding="4px 5px" size="16rpx" plain>
                      满 {{ getLscs(rowData.Lscs, '满') }} 起 买 {{ getLscs(rowData.Lscs, '买') }} 送 {{ getLscs(rowData.Lscs, '送') }}
                    </tui-tag>
                  </view>

                  <view class="goods-item-bottom">
                    <!-- 商品价格 -->
                    <view class="goods-item-price text-price mr-5 white-space-nowrap">
                      <text class="pr-4">{{ rowData.Price }}</text>
                      <text class="fs-xs">{{ rowData.Unit }}</text>
                    </view>

                    <!-- 点击添加 选规格 / - num + -->
                    <view class="choose-box pb-2 white-space-nowrap">
                      <!-- 多选 -->
                      <view v-if="isMeal(rowData.set)" class="multi-select" @click="showForm(rowData, rowData.id)">
                        <text>选规格</text>

                        <view v-if="rowData.selectNumber" class="select-number">{{ rowData.selectNumber }}</view>
                      </view>

                      <!-- 单选 -->
                      <block v-else>
                        <NumberBox :value="rowData.selectNumber" :min="getLscs(rowData.Lscs, '满', 1)" :rowData="rowData" @change="addGoodsChange"></NumberBox>
                      </block>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </scroll-view>

          <view v-else-if="goodsList && goodsList.length === 0" class="goods-container" style="padding-top: 15vh">
            <tui-no-data :fixed="false" imgUrl="/static/images/no-data/no-data.png">暂未查询到相关数据</tui-no-data>
          </view>
        </view>
      </my-modal>
    </view>
  </view>
</template>

<script>
import NumberBox from '@/pages/shop/components/number-box/number-box.vue'
import common from '@/pages/shop/mixins/common'
// import addGood from '@/pages/shop/mixins/add-good'
export default {
  name: 'ModalSearch',
  components: { NumberBox },
  mixins: [common],
  data() {
    return {
      goodsList: null
    }
  },
  methods: {
    showForm() {
      this.$parent.showForm(...arguments)
    },
    addGoodsChange() {
      this.$parent.addGoodsChange(...arguments)
    },

    /**
     * 获取菜品列表
     * 必填: 'token', 'selectuniacid':登录的商家id, 'bid': 门店id, 'roomid': 房台id , 'stypeid': 小类id
     * 场景：未知
     */
    getGoods(param) {
      const keyword = this.$format(param, 'value')
      if (!keyword) return this.$msg('text', '请输入搜索条件')
      const baseParam = this.getBase(['token', 'selectuniacid', 'bid', 'roomid', 'ordernum'])
      if (!baseParam) return
      Object.assign(baseParam, { keyword })
      console.param('获取菜品列表', baseParam)
      this.$api
        .getGoods(baseParam)
        .then(res => {
          this.goodsList = Object.values(this.$format(res, 'data'), [])
          console.res('搜索的菜品列表', this.goodsList)

          // 展示搜索列表的时候，同步购物车的选中状态
          if (this.goodsList && this.goodsList.length > 0) {
            this.$parent.init(this.goodsList)
          }
        })
        .catch(err => {
          console.err('获取菜品列表', err)
          this.errMsg(err, '获取菜品列表失败')
        })
    },

    /* 模态框操作 */
    open(param) {
      this.$refs.modal.open({ showClose: this.$format(param, 'showClose', true) })
    },
    close() {
      this.$refs.modal.close()
    },
    state() {
      return this.$refs.modal.show
    },
    afterModalClose() {
      this.$refs.searchbar.clearInput()
      this.goodsList = null
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$activeBg: #282e44;
$modalContainerHeight: 80vh;
$searchHeight: 52px;
.modal-container {
  height: $modalContainerHeight;
  position: relative;
  padding: 0;

  .goods-container {
    position: relative;
    height: calc(#{$modalContainerHeight} - #{$searchHeight});
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
  }

  // 商品容器
  .goods-item-box {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;

    height: 75px;
    margin-bottom: 20px;

    &:last-child {
      border-bottom: 0;
    }

    .goods-item-img {
      background: $imgBg;
      width: 77px;
      height: 100%;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 10px;
    }

    .goods-item-content {
      height: 100%;
      width: 75%;
      display: flex;
      flex-direction: column;
      align-content: space-between;
      position: relative;
      justify-content: space-between;

      .goods-item-title {
        width: 100%;
      }

      .goods-item-bottom {
        @include is-flex(row, space-between, center, nowrap);
        // 加减操作组件
        ::v-deep .hx-numbox-item {
          width: 22px;
          height: 22px;
        }
      }

      .goods-item-price {
        font-weight: bold;
        display: flex;
        align-items: center;
        color: $gold;
        font-size: 30rpx;
      }
    }

    // 多选
    .multi-select {
      position: relative;
      margin-top: 2px;
      padding: 3px 10px;
      font-size: $font-size-xs;
      text-align: center;
      border: 1px solid $gold;
      color: $gold;

      .num {
        position: absolute;
        right: 0;
        top: -10px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 10px;
        color: #fff;
        background-color: $color-primary-modal-bg;
        color: $gold;
        text-align: center;
        border-radius: 50%;
      }
    }

    .cart-meal-form {
      margin-top: 5px;
      background: #232a3e;
      padding: 10px 15px;
      border-radius: 5px;
      width: 100%;
      font-size: $font-size-xs;
      &-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
      }
      &-item:last-child {
        margin-bottom: none;
      }
    }
  }
}
</style>
